<template>
  <div class="register-box">
    <div class="title">
      <div class="title-content">
        注册账号
      </div>
    </div>
    <!-- <div class="title">WELCOME TO ZHIYI SYSTEM</div> -->
    <!-- <div class="word">请在下方注册您的账号</div> -->
    <div class="attention">注册账号：</div>
    <div>
      <input
        type="text"
        v-model="user.username"
        autocomplete="off"
        @keyup.enter="register"
      />
    </div>
    <div class="attention">注册密码：</div>
    <div>
      <input
        type="password"
        v-model="user.password"
        autocomplete="off"
        @keyup.enter="register"
      />
    </div>
    <div class="attention">请再次确认您的密码：</div>
    <div>
      <input
        type="password"
        v-model="passCheck"
        autocomplete="off"
        @keyup.enter="register"
      />
    </div>

    <div class="attention">您的邮箱：</div>
    <div>
      <input v-model="user.email" autocomplete="off" @keyup.enter="register" />
    </div>

    <div class="attention">您的联系方式：</div>
    <div>
      <input v-model="user.mobile" autocomplete="off" @keyup.enter="register" />
    </div>

    <div><button @click="register">注册</button></div>
    <div><a class="right" @click="login">返回登录</a></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      passCheck: "",
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    async register() {
      if (this.user.username == "") {
        this.$message.info("请输入您的注册账号！");
      } else if (this.user.password == "") {
        this.$message.info("请输入您的注册密码！");
      } else if (this.passCheck == "") {
        this.$message.info("请再次确认您的密码！");
      } else if (this.user.password != this.passCheck) {
        this.$message.info("两次输入的密码不一致，请再次确认您的密码！");
        this.passCheck = "";
      } else {
        // 注册逻辑
        // alert("注册逻辑！");
        const res = await this.$_api.register(this.user);

        if (res.data.success) {
          this.$message.info("注册成功！");
        } else {
          this.$message.warning("账号已存在，请重新注册！");
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.register-box {
  // background: #102962;
  // opacity: 0.85;
  padding: 45px 30px;
  width: 380px;
  // height: 620px;
}
// .title {
//   font: 23px bolder;
//   color: white;
//   margin: 0;
//   padding: 0;
// }

.title {
  width: 100%;
  text-align: center;
  margin: 0 0 30px 0;
  &-content {
    display: inline-block;

    border-bottom: 3px #102962 solid;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 5px;
  }
}

.word {
  font-size: 16px;
  color: #102962;
  margin-top: 16px;
  padding: 0;
}

input {
  // background: #102962;
  width: 318px;
  height: 30px;
  color: #102962;
  font-size: 16px;
  padding: 10px 0 10px 5px;
  border: none;
  border-bottom: 1.5px lightgray solid;

  transition: box-shadow 0.8s;

  &:focus {
    box-shadow: 0 0 6px #2d5bc7;
    border-radius: 3px;
    outline: none;
  }
}

.attention {
  color: black;
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0;
}

button:focus {
  outline: none;
}

button {
  display: block;
  background: #2d5bc7;
  color: white;
  border: none;
  height: 44px;
  width: 318px;
  margin: 30px 0 30px 0;

  white-space: pre;

  /* css3动画 */
  transition: background 1s;
  -moz-transition: background 1s; /* Firefox 4 */
  -webkit-transition: background 1s; /* Safari and Chrome */
  -o-transition: background 1s; /* Opera */
}
button:hover {
  background: #487fff;
  cursor: pointer;
}
a {
  color: white;
}
a:hover {
  text-decoration: underline;
}

.right {
  float: right;
  color: #102962;
}
</style>
